<template>
  <CustomTableCard 
    footer
    temporary 
    actions 
    :total="total" 
    :page.sync="queryParams.page" 
    :limit.sync="queryParams.limit" 
    :width="1000"
    :showDrawer.sync="showDrawer" 
    @on-page="getList" 
    @cancel="handleCancel"
    @ok="handleOk"
    :title="baseInfo.id ? $t('actions.edit') : $t('actions.add')">
    <div slot="header">
      <v-row>
        <v-col cols="3">
          <v-text-field
            v-model.trim="queryParams.keyword"
            :label="$t('placeholder.keyword')"
            outlined
            dense
            hide-details
            clearable
            @keyup.enter.native="getList(1)"
          ></v-text-field>
        </v-col>
        <v-col>
          <v-btn color="info" class="mr-3" @click="getList(1)">{{ $t('actions.search') }}</v-btn>
        </v-col>
        <v-col cols="1" class="text-right">
          <v-btn color="primary" @click="showDrawer = true">{{ $t('actions.add') }}</v-btn>
        </v-col>
      </v-row>
    </div>
    <el-table
      v-loading="listLoading"
      v-auto-height
      :height="tableHeight"
      :data="tableData"
      stripe
      fit
      @selection-change="handleSelectionChange"
      style="width: 100%">
      <el-table-column
        type="selection"
        align="center"
        width="56">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        fixed="left"
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="contact"
        label="导游编号"
        width="180">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="address"
        label="护照号/身份证号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="contact"
        label="国籍"
        width="180">
      </el-table-column>
      <el-table-column
        prop="contact"
        label="导游证号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="telphone"
        :label="$t('peers.fields.telphone')"
        width="180">
      </el-table-column>
      <el-table-column
        prop="email"
        :label="$t('peers.fields.email')"
        width="180">
      </el-table-column>
      <el-table-column
        prop="contact"
        label="微信号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="contact"
        label="押金"
        width="180">
      </el-table-column>
      <el-table-column
        prop="contact"
        label="性别"
        width="180">
      </el-table-column>
      <el-table-column
        prop="contact"
        label="出生日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="contact"
        label="等级"
        width="180">
      </el-table-column>
      <el-table-column
        prop="contact"
        label="不良记录"
        width="180">
      </el-table-column>
      <el-table-column
        prop="contact"
        label="护照图片"
        width="180">
      </el-table-column>
      <el-table-column
        prop="contact"
        label="备注"
        width="180">
      </el-table-column>
      <el-table-column
        prop="updated_user_name"
        :label="$t('peers.fields.modified')"
        width="180">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="created_at"
        :label="$t('peers.fields.created_at')"
        width="180">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="updated_at"
        :label="$t('peers.fields.updated_at')"
        width="180">
      </el-table-column>
      <el-table-column
        fixed="right"
        prop="statusName"
        :label="$t('peers.fields.status')"
        width="140">
        <template slot-scope="{ row }">
          <v-switch class="mt-0" dense hide-details :input-value="row.status == 1" :label="row.status == 1 ? '已激活' : '已锁定'" @change="setStatus(row)"></v-switch>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        :label="$t('peers.fields.action')"
        align="center"
        width="180">
        <template slot-scope="{ row }">
          <v-btn class="mr-2" small color="primary" outlined @click="handleEdit(row)">{{ $t('actions.edit') }}</v-btn>
          <v-btn small color="warning" outlined @click="handleRmove(row)">{{ $t('actions.delete') }}</v-btn>
        </template>
      </el-table-column>
    </el-table>
    <div slot="actions">
      <v-btn small color="success" :disabled="!multipleSelection.length" class="mr-2" @click="setStatusAll(1)">{{ $t('actions.open') }}</v-btn>
      <v-btn small color="warning" :disabled="!multipleSelection.length" @click="setStatusAll(2)">{{ $t('actions.close') }}</v-btn>
    </div>
    <section slot="drawer" class="pa-3">
      <v-form
        ref="form"
        :lazy-validation="false"
      >
        <v-card class="mb-4">
          <v-card-title class="pa-2 justify-space-between">
            <div>{{ $t('peers.fields.base_info') }}</div>
          </v-card-title>
          <v-divider />
          <v-card-text>
            <v-row class="pt-n2">
              <v-col cols="6" class="pl-6 pb-0">
                <div class="d-flex align-center flex-grow-1">
                  <label style="width: 140px" class="text-right pr-3"><small class="mr-1" style="color: red">({{$t('other.required')}})</small>购物、自费点名称</label>
                  <v-text-field
                    v-model="baseInfo.address"
                    placeholder="请输入"
                    clearable
                    dense
                    :rules="[rules.required]"
                    required
                  ></v-text-field>
                </div>
              </v-col>
              <v-col cols="6" class="pl-0 pb-0">
                <div class="d-flex align-center flex-grow-1 px-3">
                  <label style="width: 140px" class="text-right flex-shrink-0 pr-3">类型</label>
                  <v-select
                    :items="['购物店', '自费点']"
                    hide-details
                    single-line
                    dense>
                  </v-select>
                </div>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="6" class="pl-6">
                <div class="d-flex align-center flex-grow-1">
                  <label style="width: 140px" class="text-right pr-3">编号</label>
                  <v-text-field
                    v-model="baseInfo.name"
                    placeholder="请输入"
                    clearable
                    dense
                  ></v-text-field>
                </div>
              </v-col>
              <v-col cols="6" class="pl-0">
                <div class="d-flex align-center flex-grow-1 px-3">
                  <label style="width: 140px" class="text-right flex-shrink-0 pr-3">结算方式</label>
                  <dict-select 
                    v-model="baseInfo.source" 
                    dense
                    single-line
                    clearable
                    item-value="value"
                    type="customersource"/>
                </div>
              </v-col>
            </v-row>
            <div class="d-flex">
              <div class="d-flex align-center flex-grow-1 px-3">
                <label style="width: 140px" class="text-right pr-3">联系人</label>
                <v-text-field
                  v-model="baseInfo.email"
                  placeholder="请输入"
                  clearable
                  dense
                ></v-text-field>
              </div>
              <div class="d-flex align-center flex-grow-1 px-3">
                <label style="width: 140px" class="text-right pr-3">{{ $t('peers.fields.telphone') }}</label>
                <v-text-field
                  v-model="baseInfo.telphone"
                  placeholder="请输入"
                  clearable
                  dense
                ></v-text-field>
              </div>
            </div>
            <v-row>
              <v-col cols="6" class="pl-6 pb-0">
                <div class="d-flex align-center flex-grow-1">
                  <label style="width: 140px" class="text-right pr-3">所在城市</label>
                  <v-text-field
                    v-model="baseInfo.address"
                    placeholder="请输入"
                    clearable
                    dense
                  ></v-text-field>
                </div>
              </v-col>
              <v-col cols="6" class="pl-0 pb-0">
                <div class="d-flex align-center flex-grow-1 px-3">
                  <label style="width: 140px" class="text-right flex-shrink-0 pr-3">详细地址</label>
                  <v-text-field
                    v-model="baseInfo.address"
                    placeholder="请输入"
                    clearable
                    dense
                  ></v-text-field>
                </div>
              </v-col>
            </v-row>
            <v-row class="pt-n2">
              <v-col cols="6" class="pl-6">
                <div class="d-flex align-center flex-grow-1">
                  <label style="width: 140px" class="text-right pr-3">邮箱</label>
                  <v-text-field
                    v-model="baseInfo.address"
                    placeholder="请输入"
                    clearable
                    dense
                  ></v-text-field>
                </div>
              </v-col>
              <v-col cols="6" class="pl-0">
                <div class="d-flex align-center flex-grow-1 px-3">
                  <label style="width: 140px" class="text-right flex-shrink-0 pr-3">传真</label>
                  <v-text-field
                    v-model="baseInfo.address"
                    placeholder="请输入"
                    clearable
                    dense
                  ></v-text-field>
                </div>
              </v-col>
            </v-row>
            <div class="d-flex align-center px-3">
              <label style="width: 140px" class="text-right pr-3">{{ $t('peers.fields.remark') }}</label>
              <v-textarea
                v-model="baseInfo.remark"
                placeholder="请输入"
                clearable
                auto-grow
                counter
                no-resize
                :rows="2"
                dense
              ></v-textarea>
            </div>
          </v-card-text>
        </v-card>
        <v-card class="mb-4">
          <v-card-title class="pa-2 justify-space-between">
            <div>证件信息</div>
            <v-btn color="primary" rounded small @click="addConcatUser">{{ $t('actions.add') }}</v-btn>
          </v-card-title>
          <v-divider />
          <el-table
            border
            :data="contactData">
            <el-table-column
              fixed="left"
              type="index"
              align="center"
              :label="$t('peers.fields.index')"
              width="60">
            </el-table-column>
            <el-table-column
              label="证件类型"
              width="180">
              <template slot="header">
                <span class="mr-1">证件类型</span>
                <small style="color: red">({{$t('other.required')}})</small>
              </template>
              <template slot-scope="{ row }">
                <v-select
                  :items="['按比例']"
                  hide-details
                  dense
                  outlined
                  single-line
                  >
                </v-select>
              </template>
            </el-table-column>
            <el-table-column
              label="证件号码"
              width="180">
              <template slot="header">
                <span class="mr-1">证件号码</span>
                <small style="color: red">({{$t('other.required')}})</small>
              </template>
              <template slot-scope="{ row }">
                <v-text-field
                  v-model="row.fullname"
                  outlined
                  single-line
                  hide-details
                  dense
                  :rules="[rules.required]"
                  required
                ></v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              label="签发日期"
              width="242">
              <template slot-scope="{ row }">
                <el-date-picker></el-date-picker>
              </template>
            </el-table-column>
            <el-table-column
              label="有效期"
              width="242">
              <template slot-scope="{ row }">
                <el-date-picker></el-date-picker>
              </template>
            </el-table-column>
            <el-table-column
              label="附件"
              width="140">
              <template slot-scope="{ row }">
                <v-text-field
                  v-model="row.email"
                  outlined
                  single-line
                  hide-details
                  dense
                ></v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              :label="$t('peers.fields.action')"
              width="80">
              <template slot-scope="{ $index }">
                <v-btn small color="warning" outlined @click="handleRmoveConcatUser($index)">{{ $t('actions.delete') }}</v-btn>
              </template>
            </el-table-column>
          </el-table>
        </v-card>
      </v-form>
    </section>
  </CustomTableCard>
</template>

<script>
// @ is an alias to /src
import * as partnerApi from '@/api/partner'
import mixin from './mixin'

export default {
  name: 'guide',
  mixins: [mixin],
  created() {
    this.getList()
    this.cloneFormData()
  },
  activated() {
    console.log('activated')
    this.getList()
  },
  deactivated() {
    console.log('deactivated')
  },
  data() {
    return {
      showDrawer: false,
      tableData: [{}],
      total: 0,
      listLoading: false,
      queryParams: {
        page: 1,
        limit: 20,
        keyword: ''
      },
      radioManage: 0,

      baseInfo: {
        id: undefined,
        name: '',
        code: '',
        fax: '',
        source: '',
        telphone: '',
        email: '',
        source: '',
        code: '',
        contact: '',
        quota: '',
        fax: '',
        url: '',
        address: '',
        remark: ''
      },

      multipleSelection: [],

      // 联系人
      contactData: [],

      bankAccountData: [],

      rules: {
        required: value => !!value || 'required',
      }
    }
  },

  methods: {
    // 克隆数据 用于重置数据使用
    cloneFormData() {
      this._baseInfo = Object.assign({}, this.baseInfo)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 获取客户列表
    getList(page) {
      if (/\d+/.test(page)) {
        this.queryParams.page = page
      }
      this.listLoading = true
      partnerApi.fetchList(this.queryParams).then(response => {
        this.tableData = response.data.data
        this.total = response.data.count
      }).finally(() => {
        this.listLoading = false
      })
    },
    // 编辑列表
    handleEdit(row) {
      this.showDrawer = true
      Object.assign(this.baseInfo, row)
    },
    // 添加联系人
    addConcatUser() {
      this.contactData.push({
        fullname: '',
        phone: '',
        email: ''
      })
    },
    // 删除联系人
    handleRmoveConcatUser(index) {
      this.contactData.splice(index, 1)
    },
    // 添加银行卡信息
    addBankAccount() {
      this.bankAccountData.push({
        account: '',
        accountName: '',
        bankName: '',
        remark: ''
      })
    },
    // 删除联系人
    handleRmoveBankAccount(index) {
      this.bankAccountData.splice(index, 1)
    },
    // 删除列表
    handleRmove(row) {
      this.$confirm(this.$t('peers.tips.delete'), this.$t('peers.others.tip'), {
        center: true,
        type: 'warning'
      }).then(() => {
        partnerApi.remove({idArr: [row.id]}).then(() => {
          this.$message.success('success')
          this.getList()
        })
      })
    },
    // 批量设置状态
    setStatusAll(status) {
      let ids = this.multipleSelection.map(item => item.id)
      this.updateStatus({idArr: ids, status})
    },
    // 设置状态
    setStatus(row) {
      let status = row.status == 1 ? 2 : 1
      this.updateStatus({idArr: [row.id], status})
    },
    // 更新状态
    updateStatus(params) {
      partnerApi.setStatus(params).then(() => {
        this.$message.success('success')
        this.getList()
      })
    },
    // 右侧窗口关闭事件
    handleCancel() {
      this.resetForm()
    },
    // 重置表达数据和验证
    resetForm () {
      Object.assign(this.baseInfo, this._baseInfo)
      this.contactData = []
      this.bankAccountData = []
      this.$refs.form.resetValidation()
    },
    // 右侧窗口确定事件
    handleOk() {
      // console.log(this.baseInfo)
      if(this.$refs.form.validate()) {
        if(this.baseInfo.id) {
          partnerApi.update(this.baseInfo).then(() => {
            this.$message.success('success')
            this.getList(1)
            this.showDrawer = false
          })
        } else {
          partnerApi.create(this.baseInfo).then(() => {
            this.$message.success('success')
            this.getList(1)
            this.showDrawer = false
          })
        }
      }
    }
  }
}
</script>
